<template>
  <div>
    <el-form :inline="true" :model="scheduleQueryCondition" class="demo-form-inline" style="margin-left: 50px">
      <el-form-item label="姓名">
        <el-input v-model="scheduleQueryCondition.username" placeholder="不限" size="mini" @blur="onSubmit"></el-input>
      </el-form-item>
      <el-form-item label="职位">
        <el-input v-model="scheduleQueryCondition.position" placeholder="不限" size="mini" @blur="onSubmit"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" size="mini">查询</el-button>
      </el-form-item>
    </el-form>
      <el-row :gutter="50">
        <div v-for="student in studentList" :key="student.index">
          <el-col :span="12">
            <el-card shadow="hover">
              <!-- <div style=""> -->
                <img :src="student.etmsUser.userHeadImg" width="125px" height="125px" style="float: left"/>
                <div style="float: left; margin-left: 10px; width: 100px">
                  <table style="line-height: 1.5em; font-size: 15px">
                    <tr style="font-size: 18px; line-height: 2.5em; font-weight: bold">{{student.etmsUser.userName}}</tr>
                    <tr>{{student.etmsUser.userPosition}}</tr>
                    <tr>{{student.etmsUser.dept.deptName}}</tr>
                  </table>
                </div>
              <!-- </div> -->
              <el-progress type="circle" :percentage="student.trainSchedule" width="125" style="margin-left: 30px" :color="colors"></el-progress>
              <div style="float: right; margin-top: 70px">
                <el-link type="danger" @click="deleteStu(student.studentId)">删除</el-link><br><br>
                <el-link type="primary" @click="checkDetail(student.userId)">查看详情</el-link>
              </div>
            </el-card>
          </el-col>
        </div>
      </el-row>
  </div>
</template>

<script>
  import { getAppliedStudent } from '@/api/item'
  import { deleteStu } from '@/api/item'
  import { Message } from 'element-ui'

  export default {
    data() {
      return {
        studentList: [],
        scheduleQueryCondition: {
          username: '',
          position: '',
          page: 1,
          limit: 8,
          itemId: 0
        },
        colors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ]
      }
    },
    created() {
      this.scheduleQueryCondition.itemId = this.$route.query.itemId;
      this.getApplied(this.scheduleQueryCondition)
    },
    methods: {
      onSubmit() {
        this.getApplied(this.scheduleQueryCondition)
      },
      getApplied(data){
        getAppliedStudent(data).then((res) => {
          this.studentList = res.data.list
          console.log(this.studentList);
        }).catch((err) => {
          
        });
      },
      checkDetail(userId) {
        this.$router.push({
          name: "studentDetails",
          query: {
            userId: userId,
          },
        });
      },
      deleteStu(studentId){
        deleteStu(studentId).then((res) => {
          Message({
            message: res.message || 'success',
            type: 'success',
            duration: 2 * 1000
          })
          this.getApplied(this.scheduleQueryCondition)
        }).catch((err) => {
        })
      }
    }
  }
</script>


<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  /* *{
    border: 1px solid red;
  } */
</style>